<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、修饰符是什么</h2>
  <div>vue中修饰符分为以下五种：</div>
  <ul>
    <li>表单修饰符</li>
    <li>事件修饰符 </li>
    <li>鼠标按键修饰符</li>
    <li>键值修饰符</li>
    <li>v-bind修饰符</li>
  </ul>
  <h2>二、修饰符的作用</h2>
  <h3>表单修饰符</h3>
  <div>在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model</div>
  <br>
  <div>关于表单的修饰符有如下：</div>
  <ul>
    <li>lazy</li>
    <li>trim</li>
    <li>number</li>
  </ul>
  <h4>lazy</h4>
  <div>在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步</div>
  <h4>trim</h4>
  <div>自动过滤用户输入的首空格字符，而中间的空格不会过滤</div>
  <h4>number</h4>
  <div>自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值</div>
  <script>
    // <input type="text" v-model.lazy="value">
    // <p>{{value}}</p>

    // <input type="text" v-model.trim="value">

    // <input v-model.number="age" type="number">
  </script>
  <h3>事件修饰符</h3>
  <div>事件修饰符是对事件捕获以及目标进行了处理，有如下修饰符：</div>
  <ul>
    <li>stop</li>
    <li>prevent</li>
    <li>self</li>
    <li>once</li>
    <li>capture</li>
    <li>passive</li>
    <li>native</li>
  </ul>
  <h4>stop</h4>
  <div>阻止了事件冒泡，相当于调用了event.stopPropagation方法</div>
  <h4>prevent</h4>
  <div>阻止了事件的默认行为，相当于调用了event.preventDefault方法(如表单提交)</div>
  <h4>self</h4>
  <div>只当在 event.target 是当前元素自身时触发处理函数</div>
  <br>
  <div>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击</div>
  <h4>once</h4>
  <div>绑定了事件以后只能触发一次，第二次就不会触发</div>
  <h4>capture</h4>
  <div>使事件触发从包含这个元素的顶层开始往下触发</div>
  <h4>passive</h4>
  <div>在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符</div>
  <h4>native</h4>
  <div>让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件</div>
  <h3>鼠标按钮修饰符</h3>
  <div>鼠标按钮修饰符针对的就是左键、右键、中键点击，有如下：</div>
  <ul>
    <li>left 左键点击</li>
    <li>right 右键点击</li>
    <li>middle 中键点击</li>
  </ul>
  <h3>键盘修饰符</h3>
  <div>键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：</div>
  <ul>
    <li>普通键（enter、tab、delete、space、esc、up...）</li>
    <li>系统修饰键（ctrl、alt、meta、shift...）</li>
    <li></li>
  </ul>
  <script>
    // <div @click="shout(2)">
    //   <button @click.stop="shout(1)">ok</button>
    // </div>
    //只输出1

    // <div v-on:click.self="doThat">...</div>

    // <button @click.once="shout(1)">ok</button>

    // <div @click.capture="shout(1)">
    //     obj1
    // <div @click.capture="shout(2)">
    //     obj2
    // <div @click="shout(3)">
    //     obj3
    // <div @click="shout(4)">
    //     obj4
    // </div>
    // </div>
    // </div>
    // </div>
    // 输出结构: 1 2 4 3 

    // <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    // <!-- 而不会等待 `onScroll` 完成  -->
    // <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    // <div v-on:scroll.passive="onScroll">...</div>

    // <my-component v-on:click.native="doSomething"></my-component>

    // <button @click.left="shout(1)">ok</button>
    // <button @click.right="shout(1)">ok</button>
    // <button @click.middle="shout(1)">ok</button>

    // 只有按键为keyCode的时候才触发
    // <input type="text" @keyup.keyCode="shout()">

    // 还可以通过以下方式自定义一些全局的键盘码别名
    // Vue.config.keyCodes.f2 = 113

  </script>
  <h3>v-bind修饰符</h3>
  <div>v-bind修饰符主要是为属性进行操作，用来分别有如下：</div>
  <ul>
    <li>async</li>
    <li>prop</li>
    <li>camel</li>
  </ul>
  <div>使用async需要注意以下两点：</div>
  <ul>
    <li>使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致</li>
    <li>注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用</li>
    <li>将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的</li>
  </ul>
  <h4>props</h4>
  <h2>三、应用场景</h2>
  <div>根据每一个修饰符的功能，我们可以得到以下修饰符的应用场景：</div>
  <ul>
    <li>.stop：阻止事件冒泡</li>
    <li>.native：绑定原生事件</li>
    <li>.once：事件只执行一次</li>
    <li>.self ：将事件绑定在自身身上，相当于阻止事件冒泡</li>
    <li>.prevent：阻止默认事件</li>
    <li>.caption：用于事件捕获</li>
    <li>.once：只触发一次</li>
    <li>.keyCode：监听特定键盘按下</li>
    <li>.right：右键</li>
  </ul>

</body>
</html>